<template>
  <div class="overflow-y">
    <el-collapse v-model="activeNames">
      <el-collapse-item :title="$t('PORT_INFO') + ':'" name="main">
        <div class="selected-port-info p-10 pt-0">
          <!-- A端站点 -->
          <div class="flex">
            <label>{{ $t('ZONE_SIDE_SITE', { side: 'A' }) }}：</label>
            <p class="flex-1">{{ formData.aPortData ? formData.aPortData.regionName : '' }}</p>
          </div>
          <!-- A端节点 -->
          <div class="flex">
            <label>{{ $t('ANODE') }}：</label>
            <p class="flex-1">{{ formData.aPortData ? formData.aPortData.nodeName : '' }}</p>
          </div>
          <!-- A端端口 -->
          <div class="flex">
            <label>{{ $t('A_END_NODE_PORT') }}：</label>
            <div class="flex-1">
              <p v-if="formData.aPortData">
                {{ `${formData.aPortData.portName}(${$t(formData.aPortData.funcType)})` }}
              </p>
              <p v-if="formData.aPortData2 && formData.aPortData2.portName">
                {{ `${formData.aPortData2.portName}(${$t(formData.aPortData2.funcType)})` }}
              </p>
            </div>
          </div>
          <!-- A端链接设备 -->
          <div class="flex">
            <label>{{ $t('A_END_CONNECT_DEVICE') }}：</label>
            <p class="flex-1 flex justify-between">
              <span>{{ formData.aAfsData ? formData.aAfsData.nodeName : '' }}</span>
              <el-button
                v-if="formData.aPortData && showType === 'open'"
                type="primary"
                class="mini-btn"
                @click="reselect('a')"
              >{{ $t('RESELECT') }}</el-button>
            </p>
          </div>
          <hr class="mt-10 mb-10" style="border-top: none">
          <!-- Z端站点 -->
          <div class="flex">
            <label>{{ $t('ZONE_SIDE_SITE', { side: 'Z' }) }}：</label>
            <p class="flex-1">{{ formData.zPortData ? formData.zPortData.regionName : '' }}</p>
          </div>
          <!-- Z端节点 -->
          <div class="flex">
            <label>{{ $t('ZNODE') }}：</label>
            <p class="flex-1">{{ formData.zPortData ? formData.zPortData.nodeName : '' }}</p>
          </div>
          <!-- Z端端口 -->
          <div class="flex">
            <label>{{ $t('Z_END_NODE_PORT') }}：</label>
            <div class="flex-1">
              <p v-if="formData.zPortData">
                {{ `${formData.zPortData.portName}(${$t(formData.zPortData.funcType)})` }}
              </p>
              <p v-if="formData.zPortData2 && formData.zPortData2.portName">
                {{ `${formData.zPortData2.portName}(${$t(formData.zPortData2.funcType)})` }}
              </p>
            </div>
          </div>
          <!-- Z端链接设备 -->
          <div class="flex">
            <label>{{ $t('Z_END_CONNECT_DEVICE') }}：</label>
            <p class="flex-1 flex justify-between">
              <span>{{ formData.zAfsData ? formData.zAfsData.nodeName : '' }}</span>
              <el-button
                v-if="formData.zPortData && showType === 'open'"
                type="primary"
                class="mini-btn"
                @click="reselect('z')"
              >{{ $t('RESELECT') }}</el-button>
            </p>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div
      v-if="
        (showType === 'open' || showType === 'restore') &&
          formData.aPortData &&
          formData.aPortData.nodeId &&
          formData.zPortData &&
          formData.zPortData.nodeId
      "
      class="flex justify-end align-center p-10"
    >
      <process-bar
        v-show="routeCount || recommended"
        style="width: 240px; margin-right: 20px; justify-content: flex-end"
        :cur-process="curProcess"
      >
        <span slot="doing" class="font-mini mr-0 text-color">{{ $t('RECOMMENDING') }}</span>
        <span slot="done" class="font-mini text-color">{{ $t('RECOMMENDED',{count: routeList.length}) }}</span>
      </process-bar>
      <FilterBtn
        v-if="showType === 'open'"
        :form-data="formData"
        :show-type="showType"
        :recommended="recommended"
        :route-count="routeCount"
        :cur-process="curProcess"
        @confirm="getRouteList"
      />
    </div>
  </div>
</template>

<script>
  import ProcessBar from '@/components/ProcessBar'
  import FilterBtn from './FilterBtn.vue'
  export default {
    components: { ProcessBar, FilterBtn },
    props: {
      formData: {
        type: Object,
        default: () => {}
      },
      showType: {
        type: String,
        default: ''
      },
      routeCount: {
        type: Number,
        default: 0
      },
      obtainedCount: {
        type: Number,
        default: 0
      },
      recommended: {
        type: Boolean,
        default: false
      },
      routeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        activeNames: ['main']
      }
    },
    computed: {
      curProcess() {
        return Math.floor((this.obtainedCount * 100) / (this.routeCount || 1))
      }
    },
    methods: {
      getRouteList() {
        this.$emit('getRouteList')
      },
      reselect(side) {
        this.$emit('reselect', side)
      }
    }
  }
</script>

<style lang="scss">
  .selected-port-info label {
    width: 1.1875rem;
  }
  .topo-open .w-50 {
    width: 100%;
  }
  .topo-open .el-form-item--mini.el-form-item {
    margin: 5px 0 0;
  }
  .topo-open .filter-station .el-form-item__label {
    padding-left: 0;
  }
  .topo-open.help-box .el-form-item--mini .el-form-item__content {
    padding-right: 0;
  }
</style>
